<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/8/8
  Time: 9:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="JS/jquery-1.8.3.js"></script>
    <script src="CSS/bootstrap.min.js"></script>
    <link rel="stylesheet" href="CSS/bootstrap.css">
    <style type="text/css">
        #dome {
            display: inline-block;
            width: 500px;
            overflow: hidden; /*溢出的部分不显示*/
            height: 180px;
        }

        .dome_top {
            display: inline-block;
            width: 500px;
        }

        #calculator {
            display: inline-block;
            vertical-align: top;
            width: 300px;
        }

        #book {
            display: inline-block;
            width: 500px;
            text-align: center;
            vertical-align: top;
        }

        h2 {
            text-align: center;
        }

        .slide-title {
            background: rgba(0, 0, 0, .5);
            color: #fff;
            height: 34px;
            line-height: 34px;
            padding: 0 10px;
            font-size: 12px;
            font-weight: bold;
        }

        .slide-title span {
            float: left;
            margin-right: 14px;
        }

        .slide-title span:nth-child(1),
        .slide-list li span:nth-child(1) {
            width: 60px;
        }

        .slide-title span:nth-child(2),
        .slide-list li span:nth-child(2) {
            width: 90px;
        }

        .slide-title span:nth-child(3),
        .slide-list li span:nth-child(3) {
            width: 90px;
            margin-right: 0px;
        }

        .slide-container {
            position: relative;
            overflow: hidden;
            height: 90px;
        }

        .slide-list {
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .slide-list li {
            height: 30px;
            line-height: 30px;
            list-style: none;
            margin: 0;
            padding: 0 10px;
        }

        .slide-list li span {
            display: inline-block;
            margin-right: 14px;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .slide-list li.odd {
            background: rgba(51, 79, 109, .3);
        }

        .slide-list li.even {
            background: rgba(51, 79, 109, .1);
        }

        #allbooks {
            width: 500px;
            display: inline-block;
            vertical-align: top;
        }

        #change {
            width: 200px;
            margin-left: 30px;
            display: inline-block;
        }

        #changeresult {
            display: inline-block;
            width: 200px;
            vertical-align: top;
            text-align: center;
        }

        h4 {
            text-align: center;
        }

        #bookQuery{
            width: 500px;
            display: inline-block;
            vertical-align: top;
        }

    </style>
</head>
<body>
<%@include file="top.jsp" %>

<div class="dome_top">
    <table class="table">
        <tr>
            <th>序号</th>
            <th>管理员编号</th>
            <th>管理员昵称</th>
            <th>删除管理员</th>
            <th>修改密码</th>
        </tr>
    </table>
    <div id="dome">
        <div id="dome1">
            <table class="table table-bordered">
            </table>
        </div>
        <div id="dome2"></div>
    </div>
</div>

<div id="calculator">
    <form role="form" action="javascript:void(0)">
        <h2>简易计算器</h2>
        <div class="form-group">
            <label for="exampleInputEmail1">第一个数</label>
            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入第一个数">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">第二个数</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="请输入第二个数">
        </div>
        <button class="btn btn-default">+</button>
        <button class="btn btn-default">-</button>
        <button class="btn btn-default">x</button>
        <button class="btn btn-default">÷</button>
        <div class="form-group">
            <label for="exampleInputPassword2">结果</label>
            <input type="text" class="form-control" id="exampleInputPassword2" placeholder="计算结果">
        </div>

    </form>

</div>


<div id="book">
    <form role="form" action="javascript:void(0)">
        <div class="form-group">
            <label for="example"><h3>图书查询</h3></label>
            <input type="text" class="form-control" id="example" placeholder="请输入查询条件">
            <input type="radio" name="choose" value="1">按书名
            <input type="radio" name="choose" value="2">按作者
            <input type="radio" name="choose" value="3">按出版社
        </div>
        <button type="submit" class="btn btn-info" id="check">查询</button>
    </form>
</div>


<div id="allbooks">
    <h3 style="text-align: center">图书列表</h3>
    <div class="slide-title">
        <span>图书编号</span>
        <span>图书名称</span>
        <span>图书作者</span>
        <span>出版社</span>
        <span>售价</span>
        <span>库存</span>
    </div>
    <div class="slide-container"><!--css设置时，注意高度是显示多少个item,如：item的高度是30px，显示3个，高度则是 3*30 = 90px -->
        <ul class="slide-list js-slide-list">
        </ul>
    </div>
</div>

<div id="change">
    <h4>类型转换测试</h4>
    <form role="form" action="javascript:void(0)">
        <div class="form-group">
            <label for="example1">字符串</label>
            <input type="text" class="form-control" id="example1" placeholder="请输入一个字符串">
        </div>
        <button type="submit" id="changeToInt" class="btn btn-info">根据","转换</button>
    </form>
</div>

<div id="changeresult">
    <table class="table table-hover">
        <caption>转换结果</caption>
        <tr>
            <td>标签</td>
            <td>结果</td>
        </tr>
    </table>
</div>



<div id="bookQuery">
    <h4>图书搜索</h4>
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">搜索条件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入查询关键字">
            </div>
        </div>

        <div class="form-group">
            <label for="select" class="col-sm-2 control-label">图书种类</label>
            <div class="col-sm-10">
                <select id="select" class="form-control">
                </select>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">搜索</button>
            </div>
        </div>
    </form>
</div>

<div id="getbook">
    <h3 style="text-align: center">图书列表</h3>
    <div class="slide-title">
        <span>图书编号</span>
        <span>图书名称</span>
        <span>图书作者</span>
        <span>出版社</span>
        <span>售价</span>
        <span>库存</span>
        <span>图片</span>
        <span>删除</span>
        <span>修改</span>
    </div>
    <div class="slide-container"><!--css设置时，注意高度是显示多少个item,如：item的高度是30px，显示3个，高度则是 3*30 = 90px -->
        <ul class="slide-list js-slide-list">
        </ul>
    </div>
</div>



</body>
<script>

    $(function () {
        getAdmin();
        all();
        getBookType();

    })

    function getBookType() {
        $.ajax({
            type:"get",
            url:"query_Book",
            data:{condition:""},
            dataType:"JSON",
            success:function (data) {
                $.each(data,function (index,obj) {
                    var option = "<option value='"+obj.bName+"'>"+obj.bName+"</option>";
                    $("#select").append(option);
                })
            }
        })
    }

    function all() {
        function $(element) {
            return document.getElementById(element);
        }

        var dome = $("dome");
        var dome1 = $("dome1");
        var dome2 = $("dome2");
        var speed = 50; //设置向上滚动速度
        dome2.innerHTML = dome1.innerHTML //复制dome1为dome2
        function moveTop() {
            if (dome1.offsetTop - dome.scrollTop <= -20) {
                dome.scrollTop = 0;
            } else {
                dome.scrollTop++;
            }
        }

        var MyMar = setInterval(moveTop, speed) //设置定时器
        dome.onmouseover = function () {
            clearInterval(MyMar)
        } //鼠标移上时清除定时器达到滚动停止的目的
        dome.onmouseout = function () {
            MyMar = setInterval(moveTop, speed)
        } //鼠标移开时重设定时器，继续滚动
    }


    function getBooks(choose, condition) {
        $.ajax({
            type: "post",
            url: "getAllAdmin_Admin",
            dataType: "JSON",
            data: {choose: choose, condition: all || condition},
            success: function (data) {

            }
        })
    }


    function getAdmin() { //获取管理员信息
        $.ajax({
            type: "post",
            url: "getAllAdmin_Admin",
            dataType: "JSON",
            success: function (data) {
                var resultData = JSON.parse(data)
                $.each(resultData, function (index, obj) {
                    var tr = "<tr><td>" + (index + 1) + "</td><td>" + obj.aid + "</td><td>" + obj.aname + "</td><td><a href=''>删除</a></td><td><a href=''>修改</a></td></tr>";
                    $(".table-bordered").append(tr);
                });
            }
        })
    }

    $(".btn-default").click(function () {
        var symbol = $(this).text(); //获取符号类型
        var num1 = $("#exampleInputEmail1").val();
        var num2 = $("#exampleInputPassword1").val();
        if (num1 == "" || num2 == "") {
            alert("数字不能为空!!");
            return;
        }
        if (symbol == "+") {
            var symb = "add";
            calculator(symb, num1, num2);
        } else if (symbol == "-") {
            var symb = "sub";
            calculator(symb, num1, num2);
        } else if (symbol == "x") {
            var symb = "muti";
            calculator(symb, num1, num2);
        } else if (symbol == "÷") {
            var symb = "div";
            calculator(symb, num1, num2);
        } else {
            alert("请选择正确的计算公式");
            return;
        }
    })

    function calculator(symbol, num1, num2) {
        $.ajax({
            type: "post",
            url: "" + symbol + "_calculator",
            data: {num1: num1, num2: num2},
            success: function (data) {
                $("#exampleInputPassword2").val(data);
            }
        })
    }


    function cal() {
        $.ajax({
            type: "post",
            url: "add_calculator",
            data: {num1: 1, num2: 2},
            success: function (data) {
                $("#exampleInputPassword2").val(data);
            }
        })
    }

    $("#check").click(function () {
        var value;
        var condition = $("#example").val();
        var choose = $("input[type='radio']");
        for (var i = 0; i < choose.length; i++) {
            if ($(choose[i]).attr("checked") == "checked") {
                value = $(choose[i]).val();
            }
        }
        $.ajax({
            type: "get",
            url: "query_Book",
            dataType: "JSON",
            data: {choose: value, condition: condition},
            success: function (data) {
               // var books = JSON.parse(data);
                $(".odd").remove();
                $.each(data, function (index, obj) {
                    var li = "<li class='odd'><span>" + obj.bId + "</span><span>" + obj.bName + "</span><span>" + obj.author + "</span><span>" + obj.publish + "</span><span>" + obj.price + "</span><span>" + obj.num + "</span></li>";
                    $(".js-slide-list").append(li);
                })
            }
        })
    })

    var doscroll = function () {
        var $parent = $('.js-slide-list');
        var $first = $parent.find('li:first');
        var height = $first.height();
        $first.animate({
            height: 0
        }, 500, function () {
            $first.css('height', height).appendTo($parent);
        });
    };
    var time = setInterval(doscroll, 1500);

    $('.js-slide-list').mouseover(function () {
        clearInterval(time);
    }).mouseout(
        function () {
            time = setInterval(doscroll, 2000);
        }
    );


    $("#changeToInt").click(function () {
        var str = $("#example1").val();
        $.ajax({
            type:"get",
            url:"change",
            data:{point:str},
            success:function (data) {
                var obj = JSON.parse(data);
                $(".num").remove();
                var tr = "<tr class='num'><td>"+obj.x+"</td><td>"+obj.y+"</td></tr>";
                $("#changeresult table").append(tr);
            }
        })
    })



    $("#changeToInt2").click(function () {
        var str = $("#example2").val();
        $.ajax({
            type:"get",
            url:"change",
            data:{point:str},
            success:function (data) {
                var obj = JSON.parse(data);
                $(".num").remove();
                var tr = "<tr class='num'><td>"+obj.x+"</td><td>"+obj.y+"</td></tr>";
                $("#changeresult2 table").append(tr);
            }
        })
    })



</script>

</html>
